<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <el-form :model="formData">
        <el-row type="flex" justify="space-around">
          <!--          <el-form-item label="快递员账号：" label-width="110px">-->
          <!--            <el-input placeholder="请输入快递员账号"></el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="快递员姓名：" label-width="110px">-->
          <!--            <el-input placeholder="请输入快递员姓名"></el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="快递员手机号：" label-width="110px">-->
          <!--            <el-input placeholder="请输入快递员手机号"></el-input>-->
          <!--          </el-form-item>-->
          <el-col :span="6">
            <el-form-item
              label="快递员账号："
              label-width="100px"
              prop="account"
            >
              <el-input
                v-model="formData.account"
                placeholder="请输入快递员账号"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="快递员姓名：" label-width="100px" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入快递员姓名"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="快递员手机号："
              label-width="110px"
              prop="phone"
            >
              <el-input
                v-model="formData.phone"
                placeholder="请输入快递手机号"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 30px">
          <el-col :span="6">
            <el-form-item label="所属机构：" label-width="110px" prop="agentId">
              <!--              <el-input-->
              <!--                v-model="formData.agentId"-->
              <!--                placeholder="请输入所属机构"-->
              <!--                style="width: 200px"-->
              <!--              ></el-input>-->
              <el-select
                ref="selectRef"
                v-model="formData.agentId"
                placeholder="请选择所属机构"
                style="width: 200px"
              >
                <el-option
                  :value="formData.agentId"
                  :label="label"
                  style="height: auto"
                >
                  <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  >
                  </el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left: 100px">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="resetFn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="70">
        </el-table-column>
        <el-table-column prop="userId" label="快递员账号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="快递员姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="快递员手机号"> </el-table-column>
        <el-table-column prop="agency.name" label="所属机构"> </el-table-column>
        <el-table-column prop="workStatus" label="工作状态">
          <template #default="{ row }">
            <div
              v-if="row.workStatus === 1"
              style="
                display: inline-block;
                background-color: #1dc779;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;
              "
            ></div>
            <div
              v-else
              style="
                display: inline-block;
                background-color: #e15536;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;
              "
            ></div>
            {{ row.workStatus === 1 ? "上班" : "休息" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default>
            <el-button type="text" style="color: #419eff"
              >作业范围分配</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="list.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="list.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getCourierListApi } from "@/api/employees";
import { getTreeListApi } from "@/api/organization-manage";

export default {
  name: "OperationalRangePage",
  data() {
    return {
      defaultProps: {
        label: "name",
        children: "children",
      },
      treeData: [],
      label: "",
      formData: {
        phone: "",
        name: "",
        account: "",
        agentId: "",
      },
      tableData: [],
      list: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.getCourierList();
    this.getTreeList();
  },
  methods: {
    // 重置
    resetFn() {
      (this.formData = {
        phone: "",
        name: "",
        account: "",
        agentId: "",
      }),
        (this.label = "");
      this.getCourierList();
    },
    handleNodeClick(data) {
      // console.log(data);
      this.label = data.name;
      this.formData.agentId = data.id;
      this.$refs.selectRef.blur();
    },
    // 搜索
    async search() {
      // this.getCourierList();
      const res = await getCourierListApi({ ...this.list, ...this.formData });
      // console.log(res);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
    },
    async getCourierList() {
      const res = await getCourierListApi(this.list);
      // console.log(res);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
    },
    handleSizeChange(a) {
      this.list.pageSize = a;
      this.getCourierList();
    },
    handleCurrentChange(a) {
      this.list.page = a;
      this.getCourierList();
    },
    async getTreeList() {
      const { data: res } = await getTreeListApi();
      // console.log(res);
      this.treeData = JSON.parse(res);
      // console.log(this.treeData);
    },
  },
};
</script>

<style lang="scss" scoped></style>
